<template>
  <div class="productInfo">
    <div style="margin: 20px"></div>
    <el-form
      ref="form"
      v-loading="loading"
      label-width="100px"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      size="small"
      :rules="rules"
      :model="modelData"
    >
      <el-form-item label="商品名" prop="name">
        <el-input v-model="modelData.name" type="name"></el-input>
      </el-form-item>
      <el-form-item label="剩余数量" prop="total">
        <el-input v-model.number="modelData.total" type="total"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input v-model.number="modelData.price" type="price"></el-input>
      </el-form-item>
      <el-form-item label="制造商" prop="manufacturer">
        <el-select
          v-model="modelData.manufacturer.name"
          clearable
          placeholder="请选择制造商"
        >
          <el-option
            v-for="manufacturer in manufacturers"
            :key="manufacturer._id"
            :label="manufacturer.name"
            :value="manufacturer.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片地址" prop="image">
        <el-input v-model="modelData.image" v-on:blur="$emit('previewImage', modelData.image)"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="description">
        <el-input type="textarea" v-model="modelData.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="isEditing"
          type="success"
          native-type="submit"
          @click="onSubmit"
          >更新商品信息</el-button
        >
        <el-button v-else @click="onSubmit">添加商品信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modelData: {
        name: '',
        price: 0,
        total: 0,
        image: '',
        manufacturer: { name: '' },
        description: '',
      },
      rules: {
        name: [
          { required: true, message: "商品名不能为空", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          },
        ],
        price: [
          { required: true, message: "价格不能为空", trigger: "blur" },
          { type: "number", message: "价格必须是数字" },
        ],
        manufacturer: [
          { required: true, message: "制造商不能为空", trigger: "blur" },
        ],
        image: [
          { required: true, message: "图片地址不能为空", trigger: "blur" },
        ],
        total: [
          { required: true, message: "剩余数量不能为空", trigger: "blur" },
          { type: "number", message: "必须是数字" },
        ]
      },
    };
  },
  props: ["model", "manufacturers", "isEditing"],
  created() {
    const product = this.model;
    this.modelData = { ...product, manufacturer: { ...product.manufacturer } };
  },
  watch: {
    model(val, oldVal) {
      this.modelData = val;
    },
  },
  computed: {
    loading() {
      return this.$store.state.showLoader;
    },
  },
  // updated() {
  //   // 等待后端完成商品信息的同步更新，设置loading为false
  //   const newProductName = this.$store.getters.productById(this.model._id);
  //   const isLoaded = this.modelData.name === newProductName;
  //   if(isLoaded) {
  //     this.loading = false;
  //   }
  // },
  methods: {
    onSubmit() {
      // 由于表单中只绑定了modelData.manufacturer.name，
      // 缺少manufacturer._id,但是后端需要manufacturer整个对象,
      // 所以需要将manufacturers中对应的manufacturer找出并覆盖到modelData中
      const manufacturer = this.manufacturers.find(
        (item) => item.name === this.modelData.manufacturer.name
      );
      this.modelData.manufacturer = manufacturer;

      this.$emit("save-product", this.modelData);
    },
  },
};
</script>
